<template>
  <div>
    <Form :model="searchFrom" :label-width="80">
      <Card style="margin-bottom: 10px;">
        <Input :placeholder="$t('userInfoManager.userName')" v-model="searchFrom.userName" style="width:200px"></Input>
        &nbsp;
        <Input :placeholder="$t('userInfoManager.mobile')" v-model="searchFrom.mobile" style="width:200px"></Input>
        &nbsp;
        <Select v-model="searchFrom.userType" style="width:200px">
          <Option v-for="item in userTypeList" :value="item.index" :key="item.index">{{ item.showName }}</Option>
        </Select>
        <Select v-model="searchFrom.userLevel" style="width:200px">
          <Option v-for="item in userLevelList" :value="item.index" :key="item.index">{{ item.showName }}</Option>
        </Select>
        &nbsp;<Button type="primary" @click="getData(1)" icon="ios-search">{{$t('button.search')}}</Button>
      </Card>
    </Form>
    <div style="margin-bottom: 10px;">
      <!-- <Button type="primary" @click="add">{{$t('button.add')}}</Button> -->
      &nbsp;<Button type="error" @click="delAll">删除所选</Button>
      &nbsp;<Button type="primary" @click="addOrderMonySumAll">批量充值矿源</Button>
    </div>

    <Table border :data="tableData" :columns="tableColumns" stripe ref="selection" @on-selection-change="handleSelectRow()" />
    <div style="margin:10px 0px;text-align: center;">
      <Page :total="dataCount" :current="searchFrom.page" @on-change="changePage"></Page>
    </div>

    <Modal v-model="formModal" :title="modalTitle" @on-ok="save" @on-cancel="saveCancel" :loading="loading"
      :mask-closable="false">
      <Form ref="saveFrom" :model="entity" :label-width="80" :rules="rules">
        <FormItem prop="userName" :label="$t('userInfoManager.userName')">
          <Input v-model="entity.userName" :placeholder="$t('userInfoManager.userName')"></Input>
        </FormItem>
        <FormItem prop="realName" :label="$t('userInfoManager.realName')">
          <Input v-model="entity.realName" :placeholder="$t('userInfoManager.realName')"></Input>
        </FormItem>
        <FormItem prop="mobile" :label="$t('userInfoManager.mobile')">
          <Input v-model="entity.mobile" :placeholder="$t('userInfoManager.mobile')"></Input>
        </FormItem>
        <FormItem prop="userType" :label="$t('userInfoManager.userType')">
          <Select v-model="entity.userType" style="width:200px">
            <Option v-for="item in userTypeList" :value="item.index" :key="item.index">{{ item.showName }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="orderValue" :label="$t('userInfoManager.orderValue')">
          <InputNumber :min="0" v-model="entity.orderValue" :placeholder="$t('userInfoManager.orderValue')"></InputNumber>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="initPassModal" :title="modalTitle" @on-ok="saveInitPass" @on-cancel="saveCancel" :loading="loading"
      :mask-closable="false">
      <Form ref="initPassFrom" :model="entity" :label-width="80" :rules="rules">
        <FormItem prop="password" :label="$t('userInfoManager.password')">
          <Input v-model="entity.password" :placeholder="$t('userInfoManager.defaultPass')"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="orderMoneySumModal" title="矿源充值" @on-ok="orderMoneySumSave" @on-cancel="saveCancel" :loading="loading"
      :mask-closable="false">
      <Form ref="addOrderMoneySumFrom" :model="entity" :label-width="100" :rules="rulesAddOrderMonySum">
        <FormItem prop="addOrderMoneySum" label="充值矿源数量">
          <Input v-model="addOrderMoneySum" placeholder="请输入充值矿源数量"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal width="80%" v-model="userBiRecordModal" :footer-hide="true" :title="$t('userInfoManager.inputOutDetail')">
      <userBiRecord :addUserId="addUserId" :biType="biType"></userBiRecord>
    </Modal>

    <Modal width="80%" v-model="orderInfoModal" :footer-hide="true" title="排单记录">
      <orderInfo :addUserId="addUserId"></orderInfo>
    </Modal>
    <Modal width="80%" v-model="teamModal" :footer-hide="true" @on-cancel="teamModalChange" title="我的团队">
      <team :userId="addUserId"></team>
    </Modal>
  </div>
</template>

<script>
  import {
    list,
    save,
    addOrderMoneySumSave,
    addOrderMoneySumSaveAll,
    del,
    delAll,
    getGhmi
  } from "@/api/manager/userInfo";
  import {
    formatDate
  } from "@/libs/tools";
  import {
    mapGetters
  } from "vuex";
  import userBiRecord from '../userBiRecord/userBiRecord';
  import orderInfo from '../orderInfo/list';
  import team from '../userInfo/team';

  export default {
    components: {
      userBiRecord,
      orderInfo,
      team
    },
    data() {
      return {
        dataCount: 0,
        tableData: [],
        formModal: false,
        initPassModal: false,
        orderMoneySumModal: false,
        modalTitle: "",
        entity: {
          orderValue: 0
        },
        pks: [],
        searchFrom: {
          page: 1
        },
        userBiRecordModal: false,
        orderInfoModal: false,
        teamModal: false,
        addUserId: 0,
        loading: true,
        userTypeList: [],
        userLevelList: [],
        biType: 300,
        addOrderMoneySum: '',
      };
    },
    mounted: function() {
      this.getData();
    },
    computed: {
      rules() {
        return {
          userName: [{
            required: true,
            message: this.$t("userInfoManager.userName") +
              this.$t("validateTip.notNull")
          }],
          mobile: [{
            required: true,
            message: this.$t("userInfoManager.mobile") + this.$t("validateTip.notNull")
          }],
          userType: [{
            required: true,
            message: this.$t("userInfoManager.userType") +
              this.$t("validateTip.notNull")
          }],
          orderValue: [{
            required: true,
            message: this.$t("userInfoManager.orderValue") +
              this.$t("validateTip.notNull")
          }]
        };
      },
      rulesAddOrderMonySum() {
        return {
          addOrderMoneySum: [{
            required: true,
            message: '请输入充值矿源数量！'
          }],
        };
      },
      tableColumns() {
        let that = this;
        return [{
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: '用户名称',
            align: "center",
            key: "userName",
            render: (h, params) => {
              let userName = h("a", {
                  on: {
                    click: () => {
                      that.addUserId = params.row.id;
                      console.info(that.teamModal)
                      // that.teamModal = true;
                      that.teamModalChange();
                      console.info(that.teamModal)
                    }
                  }
                },
                params.row.userName
              );
              let userLevelName = h("div", {}, '(' + that.getUserLevelName(params.row.userLevel) + ')');

              return h("div", [userName, userLevelName]);
            }
          },
          // {
          //   title: this.$t("userInfoManager.userType"),
          //   width: 100,
          //   align: "center",
          //   key: "userType",
          //   render: (h, params) => {
          //     return h("div", that.getUserTypeName(params.row.userType));
          //   }
          // },
          // {
          //   title: "用户等级",
          //   width: 100,
          //   align: "center",
          //   key: "userLevel",
          //   render: (h, params) => {
          //     console.info(params.row.userLevel);
          //     return h("div", that.getUserLevelName(params.row.userLevel));
          //   }
          // },
          {
            title: this.$t("userInfoManager.mobile"),
            align: "center",
            key: "mobile"
          },
          {
            title: "GHMI冻结/总额",
            align: "center",
            render: (h, params) => {
              let ghmiOrder = h("a", {
                  on: {
                    click: () => {
                      that.addUserId = params.row.id;
                      that.orderInfoModal = !that.orderInfoModal;
                    }
                  }
                },
                that.getGhmi(params.row)
              );

              // let GhmiTotal = h("div", {},
              //   that.getGhmiTotal(params.row)
              // );

              return h("div", [ghmiOrder]);
            }
          },
          // {
          //   title: "GHMI冻结",
          //   align: "center",
          //   render: (h, params) => {
          //     let ghmiOrder = h("a", {
          //         on: {
          //           click: () => {
          //             that.addUserId = params.row.id;
          //             that.orderInfoModal = !that.orderInfoModal;
          //           }
          //         }
          //       },
          //       that.getGhmi(params.row)
          //     );
          //     return h("div", [ghmiOrder]);
          //   }
          // },
          // {
          //   title: "GHMI地址",
          //   align: "center",
          //   render: (h, params) => {
          //     return h("div", that.getGhmiAddr(params.row));
          //   }
          // },
          {
            title: "USDT",
            align: "center",
            key: "biUsdt",
            render: (h, params) => {
              let biUsdt = h("a", {
                  on: {
                    click: () => {
                      that.addUserId = params.row.id;
                      that.userBiRecordModal = !that.userBiRecordModal;
                    }
                  }
                },
                params.row.biUsdt
              );
              return h("div", [biUsdt]);
            }
          },
          {
            title: "GUSD",
            align: "center",
            key: "gusd",
            render: (h, params) => {
              let gusd = h("a", {
                  on: {
                    click: () => {
                      that.addUserId = params.row.id;
                      that.biType = 500;
                      that.userBiRecordModal = !that.userBiRecordModal;
                    }
                  }
                },
                params.row.gusd
              );
              return h("div", [gusd]);
            }
          },
          {
            title: "业绩",
            align: "center",
            key: "gusd",
            render: (h, params) => {
              let gusd = h("a", {
                  on: {
                    click: () => {
                      that.addUserId = params.row.id;
                      that.biType = 200;
                      that.userBiRecordModal = !that.userBiRecordModal;
                    }
                  }
                },
                params.row.leijiMoneyUser
              );
              return h("div", [gusd]);
            }
          },
          {
            title: "矿源",
            align: "center",
            key: "gusd",
            render: (h, params) => {

              let orderMoneySum = h("div", {}, params.row.orderMoneySum);
              return h("div", [orderMoneySum]);
            }
          },
          // {
          //   title: "USDT地址",
          //   align: "center",
          //   render: (h, params) => {
          //     return h("div", that.getUsdtAddr(params.row));
          //   }
          // },
          {
            title: this.$t("userInfoManager.addDate"),
            width: 150,
            align: "center",
            key: "addDate",
            render: (h, params) => {
              return h(
                "div",
                formatDate(new Date(params.row.addDate), "yyyy-MM-dd hh:mm:ss")
              );
            }
          },
          {
            title: this.$t("userInfoManager.orderValue"),
            width: 80,
            align: "center",
            key: "orderValue"
          },
          // {
          //   title: this.$t("userInfoManager.initPass"),
          //   width: 120,
          //   align: "center",
          //   key: "password",
          //   render: (h, params) => {
          //     let initPass = h(
          //       "Button", {
          //         props: {
          //           type: "primary",
          //           size: "small"
          //         },
          //         style: {
          //           marginRight: "5px"
          //         },
          //         on: {
          //           click: () => {
          //             that.modalTitle = this.$t("userInfoManager.initPass");
          //             that.entity = Object.assign({},
          //               this.tableData[params.index]
          //             );
          //             that.entity.password = "";
          //             that.initPassModal = !this.initPassModal;
          //           }
          //         }
          //       },
          //       this.$t("userInfoManager.initPass")
          //     );
          //     return h("div", [initPass]);
          //   }
          // },
          {
            title: '操作',
            width: 280,
            // height:300,
            key: "action",
            fixed: "right",
            align: "center",
            render: (h, params) => {
              let initPass, edit, del, addOrderMoneySum;
              initPass = h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      that.modalTitle = this.$t("userInfoManager.initPass");
                      that.entity = Object.assign({},
                        this.tableData[params.index]
                      );
                      that.entity.password = "";
                      that.initPassModal = !this.initPassModal;
                    }
                  }
                },
                this.$t("userInfoManager.initPass")
              );
              edit = h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      that.modalTitle = this.$t("button.edit");
                      that.entity = Object.assign({},
                        this.tableData[params.index]
                      );
                      that.formModal = !this.formModal;
                    }
                  }
                },
                this.$t("button.edit")
              );
              addOrderMoneySum = h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      that.modalTitle = '充值矿源';
                      that.entity = Object.assign({},
                        this.tableData[params.index]
                      );
                      that.orderMoneySumModal = !this.orderMoneySumModal;
                    }
                  }
                },
                '充值矿源'
              );
              del = h(
                "Button", {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: this.$t("messageTip.tip"),
                        content: "<p>" + this.$t("messageTip.confirm") + "</p>",
                        onOk: () => {
                          this.delete(params.index);
                        }
                      });
                    }
                  }
                },
                this.$t("button.del")
              );
              return h("div", [initPass, edit, addOrderMoneySum, del]);
            }
          }
        ];
      }
    },
    methods: {
      teamModalChange() {
        this.teamModal = !this.teamModal
      },
      getUserTypeName(val) {
        let showName = "";
        for (let i = 0; i < this.userTypeList.length; i++) {
          if (this.userTypeList[i].index == val) {
            showName = this.userTypeList[i].showName;
            break;
          }
        }
        return showName;
      },
      getUserLevelName(val) {
        let showName = "";
        for (let i = 0; i < this.userLevelList.length; i++) {
          if (this.userLevelList[i].index == val) {
            showName = this.userLevelList[i].name;
            break;
          }
        }
        return showName;
      },
      getData(page) {
        if (page) {
          this.searchFrom.page = page;
        }
        list(this.searchFrom)
          .then(response => {
            const data = response.data;
            this.dataCount = data.data.dataCount;
            this.tableData = data.data.entityList;
            this.userTypeList = data.data.userTypeList;
            this.userLevelList = data.data.userLevelList;
            console.info("=================" + JSON.stringify(data.data.userLevelList))
          })
          .catch(error => {});
      },
      getGhmi(val) {
        let ghmi = val.map.orderMoney;
        return ghmi;
      },
      getGhmiTotal(val) {
        let ghmiTotal = val.map.ghmiTotal;
        return ghmiTotal;
      },
      getGhmiAddr(val) {
        let ghmiAddr = val.map.ghmiAddr;
        return ghmiAddr;
      },
      getUsdtAddr(val) {
        let usdtAddr = val.map.usdtAddr;
        return usdtAddr;
      },
      add() {
        this.modalTitle = this.$t("button.add");
        this.formModal = !this.formModal;
      },
      delete(index) {
        del(this.tableData[index].id)
          .then(response => {
            this.$Message.success(this.$t("messageTip.delSuccess"));
            this.searchFrom.page = 1;
            this.getData();
          })
          .catch(error => {
            this.$Message.error(this.$t("messageTip.frontError"));
          });
      },
      delAll() {
        if (this.pks.length == 0) {
          this.$Message.error(this.$t("messageTip.selectOne"));
          return;
        }
        this.$Modal.confirm({
          title: this.$t("messageTip.tip"),
          content: "<p>" + this.$t("messageTip.confirm") + "</p>",
          onOk: () => {
            delAll(this.pks)
              .then(response => {
                this.$Message.success(this.$t("messageTip.delSuccess"));
                this.searchFrom.page = 1;
                this.getData();
              })
              .catch(error => {
                this.$Message.error(this.$t("messageTip.frontError"));
              });
          }
        });
      },
      save() {
        let entity = this.entity;
        entity["addUserId"] = this.$store.state.user.userId;
        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
            this.$refs.saveFrom.validate(valid => {
              if (valid) {
                save(entity)
                  .then(response => {
                    this.entity = this.$options.data().entity;
                    this.getData();
                    this.$Message.success(this.$t("messageTip.saveSuccess"));
                    this.formModal = false;
                  }).catch(error => {
                    console.info(error);
                    this.$Message.error(this.$t("messageTip.frontError"));
                  });
              }
            });
          });
        }, 500);
      },
      saveInitPass() {
        let entity = this.entity;
        entity = {
          updateUserId: this.$store.state.user.userId,
          id: this.entity.id,
          password: this.entity.password
        }

        if (entity.password == "") {
          entity.password = "123456";
        }

        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
            this.$refs.initPassFrom.validate(valid => {
              if (valid) {
                save(entity)
                  .then(response => {
                    this.entity = this.$options.data().entity;
                    this.$Message.success(this.$t("messageTip.saveSuccess"));
                    this.initPassModal = false;
                  })
                  .catch(error => {
                    this.$Message.error(this.$t("messageTip.frontError"));
                  });
              }
            });
          });
        }, 500);
      },
      orderMoneySumSave() {
        console.info(this.entity);

        if (!this.addOrderMoneySum) {
          this.$Message.error('请输入充值的矿源数量');
          return;
        }
        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;

            let entity = {}
            if (this.pks.length != 0) {
              entity = {
                addOrderMoneySum: this.addOrderMoneySum
              }
              entity["updateUserId"] = this.$store.state.user.userId;
              addOrderMoneySumSaveAll(entity, this.pks)
                .then(response => {
                  this.addOrderMoneySum = this.$options.data().addOrderMoneySum;
                  this.$Message.success(this.$t("messageTip.saveSuccess"));
                  this.orderMoneySumModal = false;
                })
                .catch(error => {
                  this.$Message.error(this.$t("messageTip.frontError"));
                });

            } else {
              entity = {
                id: this.entity.id,
                addOrderMoneySum: this.addOrderMoneySum
              }

              entity["updateUserId"] = this.$store.state.user.userId;

              addOrderMoneySumSave(entity)
                .then(response => {
                  this.addOrderMoneySum = this.$options.data().addOrderMoneySum;
                  this.$Message.success(this.$t("messageTip.saveSuccess"));
                  this.orderMoneySumModal = false;
                })
                .catch(error => {
                  this.$Message.error(this.$t("messageTip.frontError"));
                });
            }

          });
        }, 500);
      },
      addOrderMonySumAll() {
        if (this.pks.length == 0) {
          this.$Message.error(this.$t("messageTip.selectOne"));
          return;
        }

        this.modalTitle = '充值矿源';
        this.orderMoneySumModal = !this.orderMoneySumModal;


        // this.$Modal.confirm({
        //   title: this.$t("messageTip.tip"),
        //   content: "<p>" + this.$t("messageTip.confirm") + "</p>",
        //   onOk: () => {
        //     delAll(this.pks)
        //       .then(response => {
        //         this.$Message.success(this.$t("messageTip.delSuccess"));
        //         this.searchFrom.page = 1;
        //         this.getData();
        //       })
        //       .catch(error => {
        //         this.$Message.error(this.$t("messageTip.frontError"));
        //       });
        //   }
        // });
      },

      saveCancel() {
        this.entity = this.$options.data().entity;
      },
      handleSelectRow(selection) {
        this.pks = [];
        let list = this.$refs.selection.getSelection();
        let that = this;
        list.forEach(function(value, index, array) {
          that.pks.push(value.id);
        });
      },
      changePage(page) {
        this.searchFrom.page = page;
        this.getData();
      },
    }
  };
</script>

<style>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>
